<template>
  <view class="nav-bar" :style="navBarStyle">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏内容区 -->
    <view 
      class="nav-content" 
      :class="{ 
        'with-shadow': showShadow && !transparent,
        'transparent': transparent
      }"
    >
      <!-- 左侧区域 -->
      <view class="nav-left">
        <view 
          v-if="showBack" 
          class="back-btn"
          @tap="handleBack"
          :style="{ opacity: transparent ? 0.8 : 1 }"
        >
          <uni-icons 
            type="left" 
            size="20" 
            :color="transparent ? '#fff' : '#333'"
          ></uni-icons>
        </view>
        <slot name="left"></slot>
      </view>

      <!-- 中间标题区域 -->
      <view 
        v-if="title" 
        class="nav-title"
        :style="{ color: transparent ? '#fff' : '#333' }"
      >
        {{ title }}
      </view>
      <slot v-else name="title"></slot>

      <!-- 右侧区域 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    // 标题文字
    title: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: true
    },
    // 是否显示底部阴影
    showShadow: {
      type: Boolean,
      default: true
    },
    // 是否透明背景
    transparent: {
      type: Boolean,
      default: false
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#ffffff'
    }
  },
  data() {
    return {
      statusBarHeight: 20
    }
  },
  computed: {
    navBarStyle() {
      if (this.transparent) {
        return {
          backgroundColor: 'transparent'
        }
      }
      return {
        backgroundColor: this.backgroundColor
      }
    }
  },
  created() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
  },
  methods: {
    handleBack() {
      const pages = getCurrentPages()
      if (pages.length > 1) {
        uni.navigateBack({
          delta: 1,
          fail: () => {
            uni.reLaunch({
              url: '/pages/index/index'
            })
          }
        })
      } else {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.nav-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  
  &.with-shadow {
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  &.transparent {
    background-color: transparent;
  }
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  min-width: 120rpx;
  height: 100%;
}

.nav-left {
  justify-content: flex-start;
}

.nav-right {
  justify-content: flex-end;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88rpx;
  height: 88rpx;
  margin-left: -30rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding: 0 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 